<template>
    <div>
      <img  class="header1_1" src="../../../assets/img/show.png">
     <div class="header1_2">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="通知公告" name="first">用户管理</el-tab-pane>
          <el-tab-pane label="新闻动态" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="政策文件" name="third">角色管理</el-tab-pane>
        </el-tabs>
      </div>
      <div class="header1_3">
          <el-row>
            <button><i class="el-icon-user-solid"></i><div>个人账户登录</div></button>
          </el-row>
        <el-row>
          <button><i class="el-icon-s-data"></i><div>机构账户登录</div></button>
        </el-row>
        <el-row>
          <button><i class="el-icon-s-check"></i><div>专家账户登录</div></button>
        </el-row>
        <el-row>
          <button><i class="el-icon-s-platform"></i><div>综合业务管理登录</div></button>
        </el-row>
      </div>

    </div>
</template>

<script>
    export default {
        name: "Header_1",
      data() {
        return {
          activeName: 'first'
        };
      },
      methods: {
        handleClick(tab, event) {
          console.log(tab, event);
        }
      }
    }
</script>

<style scoped>
.header1_1{
  float:left;
  width: 250px;
  height: 150px;
}
.header1_2{
  float: left;
  margin-left: 30px;
  margin-right: 30px;
  width:400px;
  height: 150px;
}
.header1_3{
  float: left;
  width:250px;
  height: 50px;
}
button{
  width:180px;
  height: 40px;
}
i{
  float: left;
  margin-left: 10px;
}
.header1_4{
  position: fixed;
  left: 320px;
  top:630px;
}
.logo{
  position: absolute;
  margin-top: 600px;
  width:890px;
  height: 120px;
}
</style>
